<!-- 权限管理首页 -->
<template>
  <div id="RightsManagement">
    <Breadcrumb />
    <el-card class="box-card ">
      <div slot="header" class="clearfix">
        <!--
          ButtonArray: array 头部按钮配置数组
          AddCardFunction： function 添加数据
          EidtCardFunction： function 编辑数据
        -->
        <CardHeader
          :button-array="ButtonArray"
          @AddCardFunction="AddCardFunction"
          @EidtCardFunction="EidtCardFunction"
          @DeleteCardFunction="DeleteCardFunction"
        />
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        size="small"
        @selection-change="TableSelectionChange"
      >
        <el-table-column type="selection" width="100" align="center" />
        <el-table-column prop="userName" label="用户名" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column label="管理权限" align="center">
          <template slot-scope="scope">
            {{ scope.row.privileges === 1?'超级管理员': scope.row.privileges === 2?'管理员': '普通职员' }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center">
          <template slot-scope="scope">
            {{ CommonFunction.AsteriskPhone(scope.row.phone) }}
          </template>
        </el-table-column>
        <el-table-column label="是否会员" align="center">
          <template slot-scope="scope">
            {{ scope.row.VIPStart === 1?'是': scope.row.VIPStart === 2?'否': '/' }}
          </template>
        </el-table-column>
        <el-table-column prop="integral" label="积分" align="center" />
        <el-table-column prop="VIPBalance" label="会员余额" align="center">
          <template slot-scope="scope">
            {{ CommonFunction.toPercent(scope.row.VIPBalance, '元') }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center">
          <template slot-scope="scope">
            {{ $moment(Number(scope.row.registrationTime)).format('YYYY.MM.DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="最后一次登录时间" align="center">
          <template slot-scope="scope">
            {{ $moment(Number(scope.row.lastLoginTime)).format('YYYY.MM.DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @canplay="TableRowEidt(scope.row)">编辑</el-button>
            <el-button class="detailstext" type="text" size="small" @canplay="TableDetails(scope.row)">详情</el-button>
            <el-button class="deletetext" type="text" size="small" @canplay="TableRowDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/common/Breadcrumb' // 面包屑
import CardHeader from '@/components/common/CardHeader' // 公共主页卡片标题配置
export default {
  name: 'RightsManagement',
  components: {
    Breadcrumb, // 面包屑
    CardHeader
  },
  data() {
    return {
      // 头部按钮
      ButtonArray: ['AddCardFunction', 'EidtCardFunction', 'DeleteCardFunction'],
      // 表格数据
      tableData: [{
        id: '000001', // ID
        userName: 'Forever丿顾北', // 用户名
        name: 'Forever丿顾北', // 姓名
        privileges: 1, // 管理权限 1:超级管理员，2：管理员, 3: 普通职员
        phone: '188800000000', // 联系方式
        VIPStart: 1, // 是否会员 1 是会员， 2非会员
        integral: 10000, // 积分
        VIPBalance: 100000, // 会员余额
        registrationTime: '1640966400000', // 注册时间
        lastLoginTime: '1648455401000' // 最后一次登录时间
      }],
      multipleSelection: []
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 卡片头部添加
    AddCardFunction(AddCardFunction) {
      console.log('卡片头部添加', AddCardFunction)
    },
    // 卡片头部编辑
    EidtCardFunction(EidtCardFunction) {
      console.log('卡片头部编辑', EidtCardFunction)
    },
    // 卡片删除
    DeleteCardFunction(DeleteCardFunction) {
      console.log('卡片删除', DeleteCardFunction)
    },
    // 当选择项发生变化时会触发该事件
    TableSelectionChange(val) {
      console.log('当选择项发生变化时会触发该事件', val)
    },
    // 表格单行删除
    TableRowDelete(TableRowDelete) {
      console.log('表格单行删除', TableRowDelete)
    },
    // 表单单行编辑
    TableRowEidt(TableRowEidt) {
      console.log('表单单行编辑', TableRowEidt)
    },
    // 表单详情
    TableDetails(TableDetails) {
      console.log('表单详情', TableDetails)
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
